<template>
  <div class="chart__row">
    <div class="chart_col">
      <a-card :loading="loading" title="折线图">
        <vLine :ref="lineptions.name" :data="lineptions.chartData" :settings="lineptions.setting"></vLine>
      </a-card>
    </div>

    <div class="chart_col">
      <a-card :loading="loading" title="饼图">
        <vPie
          :ref="pieOptions.name"
          :data="pieOptions.chartData"
          :settings="pieOptions.setting"
          :legend-visible="true"
          :tooltipVisible="true"
        ></vPie>
      </a-card>
    </div>

    <div class="chart_col">
      <a-card :loading="loading" title="柱状图">
        <vHistogram
          :ref="histogramOptions.name"
          :data="histogramOptions.chartData"
          :settings="histogramOptions.setting"
          :grid="histogramOptions.grid"
          :colors="histogramOptions.colors"
          :extend="histogramOptions.extend"
        ></vHistogram>
      </a-card>
    </div>

    <div class="chart_col">
      <a-card :loading="loading" title="条形图">
        <vBar
          :ref="barOptions.name"
          :data="barOptions.chartData"
          :settings="barOptions.setting"
          :extend="barOptions.extend"
        ></vBar>
      </a-card>
    </div>

    <div class="chart_col">
      <a-card :loading="loading" title="环形图">
        <vRing :ref="ringOptions.name" :data="ringOptions.chartData" :settings="ringOptions.setting"></vRing>
      </a-card>
    </div>

    <div class="chart_col">
      <a-card :loading="loading" title="瀑布图">
        <vWaterfall
          :ref="waterfallOptions.name"
          :data="waterfallOptions.chartData"
          :settings="waterfallOptions.setting"
        ></vWaterfall>
      </a-card>
    </div>

    <div class="chart_col">
      <a-card :loading="loading" title="漏斗图">
        <vFunnel
          :ref="funnelFallOptions.name"
          :data="funnelFallOptions.chartData"
          :settings="funnelFallOptions.setting"
        ></vFunnel>
      </a-card>
    </div>

    <div class="chart_col">
      <a-card :loading="loading" title="雷达图">
        <vRadar :ref="radarOptions.name" :data="radarOptions.chartData" :settings="radarOptions.setting"></vRadar>
      </a-card>
    </div>
  </div>
</template>

<script>
import {
  lineptions,
  pieOptions,
  histogramOptions,
  barOptions,
  ringOptions,
  waterfallOptions,
  funnelFallOptions,
  radarOptions,
  scatterOptions
} from './serve.js'
import { vLine, vPie, vHistogram, vBar, vRing, vWaterfall, vFunnel, vRadar } from '@/components/VCharts'

export default {
  name: 'chart-demo',
  components: {
    vLine,
    vPie,
    vHistogram,
    vBar,
    vRing,
    vFunnel,
    vWaterfall,
    vRadar
  },
  data() {
    return {
      loading: false,
      lineptions,
      pieOptions,
      histogramOptions,
      barOptions,
      ringOptions,
      waterfallOptions,
      funnelFallOptions,
      radarOptions,
      scatterOptions
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.loading = true
      // 模拟请求延时
      const timer = setTimeout(() => {
        clearTimeout(timer)
        this.loading = false
        this.$nextTick(() => {
          // 解决宽度位置情况下渲染大小不正确的问题
          Object.keys(this.$refs).forEach(key => {
            const domRef = this.$refs[key]
            if (domRef && domRef.echarts) domRef.echarts.resize()
          })
        })
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.chart__row {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .chart_col {
    flex: 1;
    min-width: 50%;
    padding: 20px;
  }
}
</style>
